<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ name }}</title>

    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 10px 20px;
            text-align: center;
        }
        .preview {
            width: 100px;
            display: inline-block;
            margin: 10px;
        }
        .preview .inner {
            display: inline-block;
            width: 100%;
            text-align: center;
            background: #f5f5f5;
            -webkit-border-radius: 3px 3px 0 0;
            -moz-border-radius: 3px 3px 0 0;
            border-radius: 3px 3px 0 0;
        }
        .preview .inner {{ baseTag }} {
            line-height: 85px;
            font-size: 40px;
            color: #333;
        }
        .label {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            padding: 5px;
            font-size: 10px;
            font-family: Monaco, monospace;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: #ddd;
            -webkit-border-radius: 0 0 3px 3px;
            -moz-border-radius: 0 0 3px 3px;
            border-radius: 0 0 3px 3px;
            color: #666;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="{{ name }}.css" />
</head>
<body>

    <h1>{{ name }}</h1>

    {{# each assets }}

        <div class="preview">
            <span class="inner">
                <{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"></{{ ../tag }}>
            </span>
            <br>
            <span class='label'>{{ @key }}</span>
        </div>

    {{/ each }}

</body>
</html>
